<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns="http://www.w3.org/1999/xhtml"
                template="./../home.xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:define name="content">
        <div class="col-lg-12">
            <h3 class="page-header" id="comercio">
                Administracion de Pedidos
            </h3>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-primary">
                    <div class="panel-heading" style="font-weight: bold;">Registro de Pedidos > Lista de Productos</div>
                    <div class="panel-body">
                        <h:form>
                            <p:commandButton value="Guardar Productos" action="#{pedidoControlador.guardarLista}" styleClass="btn btn-primary" />
                        </h:form>
                        <br/>    
                        <h:form id="frmMisProductos" styleClass="form-horizontal">
                            <p:dataTable  emptyMessage="No existen productos registrados" widgetVar="MisProductos" selectionMode="single" selection="#{pedidoControlador.miDetalle}"  value="#{pedidoControlador.misDetalles}" var="list" 
                                          paginator="true" rows="10"  rowIndexVar="rowIndex" rowKey="#{list.subtipo.id}"
                                          paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"   >
                                <p:ajax event="rowSelect" listener="#{pedidoControlador.wrapperPedido}"  oncomplete="PF('dlgQ').show();" />
                                <f:facet name="header">
                                    <h5 style="font-weight: bold;">PRODUCTOS SELECCIONADOS</h5> 
                                </f:facet>
                                <p:column style="text-align: center;width: 5%;">
                                    <f:facet name="header">
                                        #
                                    </f:facet>
                                    <h:outputText value="#{rowIndex+1}" />
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Codigo
                                    </f:facet>
                                    <h:outputText value="#{list.subtipo.codigo}" >
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Producto
                                    </f:facet>
                                    <h:outputText value="#{list.subtipo.producto.nombre}" >
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Marca
                                    </f:facet>
                                    <h:outputText value="#{list.subtipo.marca.nombre}" >
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Precio
                                    </f:facet>
                                    <h:outputText value="#{list.subtipo.precio}" >
                                        <f:convertNumber currencySymbol="" type="currency" locale="en_US" />
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Cantidad
                                    </f:facet>
                                    <h:outputText value="#{list.cantidad}" >
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Importe
                                    </f:facet>
                                    <h:outputText value="#{list.costo}">
                                        <f:convertNumber currencySymbol="" type="currency" locale="en_US" />
                                    </h:outputText>
                                </p:column>
                                <p:columnGroup type="footer">
                                    <p:row>
                                        <p:column colspan="6" style="text-align:right" footerText="Importe Total:" />
                                        <p:column>
                                            <f:facet name="footer">
                                                <h:outputText value="#{pedidoControlador.total}" >
                                                    <f:convertNumber currencySymbol="S/. " type="currency" locale="en_US" />
                                                </h:outputText>
                                            </f:facet>
                                        </p:column>
                                    </p:row>
                                </p:columnGroup>
                            </p:dataTable>
                        </h:form>
                        <h:form id="frmProductos" styleClass="form-horizontal" >
                            <f:event type="preRenderView" listener="#{pedidoControlador.initListaProductos}" />
                            <p:dataTable  emptyMessage="No existen productos registrados"   value="#{pedidoControlador.subtipos}" var="list" 
                                          paginator="true" rows="10" lazy="true" rowIndexVar="rowIndex"
                                          paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"   >
                                <f:facet name="header">
                                    <h5 style="font-weight: bold;">PRODUCTOS DISPONIBLES</h5> 
                                </f:facet>
                                <p:column style="text-align: center;width: 10%;">
                                    <f:facet name="header">
                                        #
                                    </f:facet>
                                    <h:outputText value="#{rowIndex+1}" />
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Codigo
                                    </f:facet>
                                    <h:outputText value="#{list.codigo}" >
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Producto
                                    </f:facet>
                                    <h:outputText value="#{list.producto.nombre}" >
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Marca
                                    </f:facet>
                                    <h:outputText value="#{list.marca.nombre}" >
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        Precio
                                    </f:facet>
                                    <h:outputText value="#{list.precio}" >
                                        <f:convertNumber currencySymbol="" type="currency" locale="en_US" />
                                    </h:outputText>
                                </p:column>
                                <p:column style="text-align: center;">
                                    <f:facet name="header">

                                    </f:facet>
                                    <p:commandButton icon="icon-add" update=":dlg1" actionListener="#{pedidoControlador.wrapperPrecio(list.precio)}" oncomplete="PF('dlg1').show();" >
                                        <f:setPropertyActionListener target="#{pedidoControlador.seleccionado}"  value="#{list}" />
                                    </p:commandButton>
                                </p:column>
                            </p:dataTable>

                        </h:form>
                    </div>
                </div>
            </div>
        </div>
        <!-- DIALOGS -->
        <p:dialog modal="true" width="500" resizable="false"   header="Detalle Producto"  id="dlg1"  widgetVar="dlg1" position="center top">
            <h:form id="tablaCliente" styleClass="form-horizontal">
                <h:messages globalOnly="true" styleClass="list-group" infoClass="list-group-item list-group-item-success"
                                        errorClass="list-group-item list-group-item-danger" />
                <p:hotkey bind="esc" handler="PF('dlg1').hide();"></p:hotkey>
                <div class="form-group has-feedback">
                    <label for="idperfil" style="font-size: 15px;" class="col-sm-3 control-label">Codigo :</label>
                    <div  class="col-sm-3">
                        <pre>#{pedidoControlador.seleccionado.codigo}</pre>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label for="idperfil" style="font-size: 15px;" class="col-sm-3 control-label">Producto :</label>
                    <div  class="col-sm-6">
                        <pre>#{pedidoControlador.seleccionado.producto.nombre}</pre>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label for="idperfil" style="font-size: 15px;" class="col-sm-3 control-label">Marca :</label>
                    <div  class="col-sm-6">
                        <pre>#{pedidoControlador.seleccionado.marca.nombre}</pre>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label for="idperfil" style="font-size: 15px;" class="col-sm-3 control-label">Precio Actual:</label>
                    <div  class="col-sm-3">
                        <pre>#{pedidoControlador.precioActual}</pre>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label style="font-size: 15px;" class="col-sm-3 control-label">Precio de Venta:</label>
                    <div  class="col-sm-3">
                        <pe:inputNumber value="#{pedidoControlador.seleccionado.precio}" decimalPlaces="2" thousandSeparator="" decimalSeparator="." />
                    </div>
                </div> 
                <div class="form-group has-feedback">
                    <label for="idperfil" style="font-size: 15px;" class="col-sm-3 control-label">Cantidad :</label>
                    <div  class="col-sm-3">
                        <p:inputMask placeHolder="" mask="9?9999"  value="#{pedidoControlador.cantidad}" styleClass="form-control" />
                    </div>
                </div>
                <p:commandButton value="Guardar" styleClass="btn btn-primary" actionListener="#{pedidoControlador.agregarProductos}"  oncomplete="handleLoginRequest(xhr, status, args)" update="@form,:frmMisProductos"  />
               </h:form>
            
        </p:dialog >
        <p:dialog  modal="true" width="300" resizable="false" id="dlgQ" header="Mis Productos" widgetVar="dlgQ" position="center top">
            <h:form styleClass="form-horizontal">
                <div class="form-group has-feedback"  >
                    <div class="col-sm-12">
                        <pre>¿Desea eliminar el producto?</pre>
                    </div>
                        
               </div>
                <div class="form-group has-feedback"  >
                    <div class="col-sm-5">
                        <p:commandButton value="Aceptar" update=":frmMisProductos" actionListener="#{pedidoControlador.eliminarPedido}"  oncomplete="PF('dlgQ').hide();" />
                    </div>
                    <div class="col-sm-5" >
                        <p:commandButton value="Cancelar" oncomplete="PF('dlgQ').hide();" />
                    </div>
                </div>
            </h:form>
        </p:dialog>
        <script type="text/javascript">
            function handleLoginRequest(xhr, status, args) {
                if (args.valido) {
                    PF('dlg1').hide();
                }
            }
        </script>
    </ui:define>

</ui:composition>
